<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-24 16:21:48
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-18 11:01:17
 * @FilePath: /XMate-h5/src/components/choosePeople/components/ListSkeleton.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="skeleton-list">
    <div
      v-for="i in count"
      :key="i"
      class="skeleton-item flex items-center px-4 py-2 bg-white mb-[1px]"
    >
      <!-- 复选框占位 -->
      <div
        class="skeleton-checkbox w-[20px] h-[20px] mr-3 rounded bg-gray-200 animate-pulse"
      ></div>

      <!-- 头像占位 -->
      <div
        class="skeleton-avatar w-10 h-10 rounded-full bg-gray-200 mr-3 animate-pulse"
      ></div>

      <!-- 文本内容占位 -->
      <div class="flex-1">
        <div
          class="skeleton-title h-5 w-24 bg-gray-200 rounded mb-1 animate-pulse"
        ></div>
        <div
          class="skeleton-subtitle h-4 w-32 bg-gray-200 rounded animate-pulse"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  count: {
    type: Number,
    default: 5
  }
});
</script>

<style lang="less" scoped>
.skeleton-list {
  .skeleton-item {
    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }

    .animate-pulse {
      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  }
}
</style>
